<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HEAD-QUARTER 综合指挥室</title>
  <link rel="stylesheet" href="css/home.css">
  <link rel="stylesheet" href="lib/Cesium/Widgets/widgets.css"/>
</head>
<body>
<nav class="navContainer">
  <div id="navL1">管理办公室</div>
  <div id="navL2">站点管控</div>
  <div>综合指挥室</div>
  <div id="navR1">报表管理</div>
  <div id="navR2">数据管理分析</div>
</nav>
<main id="office" class="contentContainer">
  <section>
    <div class="leftTop">
      <div class="title">总&nbsp体&nbsp概&nbsp况</div>
      <div id="ltClick" class="contentButton">
        >>展开详情
      </div>
      <div class="leftTop-top">
        <div>
          <div>
            <p>计划数</p>
            <p>10</p>
          </div>
          <div>
            <p>完成数</p>
            <p>9</p>
          </div>
        </div>
        <div style="position: relative;">
          <span style="">概况</span>
          <div></div>
          <div id="finishRate"></div>
          <span>
                        <span>未完成:</span>
                        <span style="color: #0088ff">10%</span>
                    </span>
        </div>
      </div>
      <div class="leftTop-bottom">
        <span style="color: #eee;margin: 20px 0 0 10px">未完成统计:</span>
        <div id="panel"></div>
      </div>
    </div>
    <div class="leftBottom">
      <div class="title">站&nbsp点&nbsp实&nbsp况</div>
      <div id="lbClick" class="contentButton">
        >>展开详情
      </div>
      <div class="siteName">
        <p></p>
        <p>长春站</p>
      </div>
      <div class="nextTime">
        <p>距离下次定标时间:</p>
        <p>
          <span></span>
          <span>时</span>
          <span></span>
          <span>分</span>
          <span></span>
          <span>秒</span>
        </p>
      </div>
      <div class="weatherTime">
        <div>
          <p></p>
          <p></p>
        </div>
        <div>
          <div id="pic_cc_"></div>
          <div>
            <p id="weather_cc_"></p>
            <p></p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section style="overflow: hidden;">
    <div style="height: 96%;width: 97%;margin: 17px auto 0 auto;">
      <div id="cesiumContainer" class="centerShow"></div>
      <div id="lt" class="leftTop">
        <div class="centerTitle">总&nbsp体&nbsp概&nbsp况</div>
        <div class="back"></div>
        <div class="leftTop-top">
          <div class="centerLeftTop">
            <div>
              <p>计划数</p>
              <p>10</p>
            </div>
            <div>
              <p>完成数</p>
              <p>9</p>
            </div>
          </div>
          <div class="centerBar" style="position: relative;">
            <span>概况</span>
            <div></div>
            <div id="finishRate-center"></div>
            <span>
              <span>未完成:</span>
              <span style="color: #0088ff">10%</span>
            </span>
          </div>
        </div>
        <div class="leftTop-bottom">
          <span style="color: #eee;margin: 20px 0 0 10px;font-size: 30px;">未完成统计:</span>
          <div id="panel-center"></div>
        </div>
      </div>
      <div id="lb" class="leftBottom">
        <div class="centerTitle">站&nbsp点&nbsp实&nbsp况</div>
        <div class="back"></div>
        <div class="siteName" style="float: left;margin: 18% 0 0 -10%;">
          <p></p>
          <p>长春站</p>
        </div>
        <div class="nextTime">
          <p style="font-size: 25px;">距离下次定标时间:</p>
          <p>
            <span style="font-size: 60px;"></span>
            <span style="font-size: 30px;">时</span>
            <span style="font-size: 60px;"></span>
            <span style="font-size: 30px;">分</span>
            <span style="font-size: 60px;"></span>
            <span style="font-size: 30px;">秒</span>
          </p>
        </div>
        <div class="weatherTime">
          <div>
            <p style="font-size: 60px;"></p>
            <p style="font-size: 30px;"></p>
          </div>
          <div>
            <div id="pic_cc_center"></div>
            <div style="font-size: 30px">
              <p id="weather_cc_center"></p>
              <p></p>
            </div>
          </div>
        </div>
      </div>
      <div id="rt" class="rightTop">
        <div class="centerTitle">实&nbsp验&nbsp运&nbsp行&nbsp状&nbsp态</div>
        <div class="back"></div>
        <div class="c_status status" style="position: relative;">
          <div id="c_time" class="c_time"></div>
          <table style="overflow: scroll">
            <tr style="height: 70px;">
              <th style="width: 10%;">站名</th>
              <th style="width: 20%;">天气</th>
              <th style="width: 10%;"></th>
              <th style="width: 10%;">状态</th>
              <th style="width: 50%;">故障率</th>
            </tr>
            <tr>
              <td>长春</td>
              <td>
                <div>
                  <div id="centerWeather_cc"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_cc"></div>
              </td>
              <td>正常</td>
              <td>
                <div id="centerFaultRate_cc"></div>
              </td>
            </tr>
            <tr>
              <td>大连</td>
              <td>
                <div>
                  <div id="centerWeather_dl"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_dl"></div>
              </td>
              <td>正常</td>
              <td>
                <div id="centerFaultRate_dl"></div>
              </td>
            </tr>
            <tr>
              <td>石家庄</td>
              <td>
                <div>
                  <div id="centerWeather_sjz"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_sjz"></div>
              </td>
              <td>正常</td>
              <td>
                <div id="centerFaultRate_sjz"></div>
              </td>
            </tr>
            <tr>
              <td>包头</td>
              <td>
                <div>
                  <div id="centerWeather_bt"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_bt"></div>
              </td>
              <td>正常</td>
              <td>
                <div id="centerFaultRate_bt"></div>
              </td>
            </tr>
            <tr>
              <td>青海湖</td>
              <td>
                <div>
                  <div id="centerWeather_qhh"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_qhh"></div>
              </td>
              <td>维修</td>
              <td>
                <div id="centerFaultRate_qhh"></div>
              </td>
            </tr>
            <tr>
              <td>南通</td>
              <td>
                <div>
                  <div id="centerWeather_nt"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_nt"></div>
              </td>
              <td>正常</td>
              <td>
                <div id="centerFaultRate_nt"></div>
              </td>
            </tr>
            <tr>
              <td>广州</td>
              <td>
                <div>
                  <div id="centerWeather_gz"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_gz"></div>
              </td>
              <td>正常</td>
              <td>
                <div id="centerFaultRate_gz"></div>
              </td>
            </tr>
            <tr>
              <td>南宁</td>
              <td>
                <div>
                  <div id="centerWeather_nn"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_nn"></div>
              </td>
              <td>正常</td>
              <td>
                <div id="centerFaultRate_nn"></div>
              </td>
            </tr>
            <tr>
              <td>呼伦贝尔</td>
              <td>
                <div>
                  <div id="centerWeather_hlbe"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_hlbe"></div>
              </td>
              <td>维修</td>
              <td>
                <div id="centerFaultRate_hlbe"></div>
              </td>
            </tr>
            <tr>
              <td>敦煌</td>
              <td>
                <div>
                  <div id="centerWeather_dh"></div>
                  <div></div>
                </div>
              </td>
              <td>
                <div id="centerPic_dh"></div>
              </td>
              <td>故障</td>
              <td>
                <div id="centerFaultRate_dh"></div>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div id="rb" class="rightBottom">
        <div class="centerTitle">产&nbsp品&nbsp展&nbsp示</div>
        <div class="back"></div>
        <div class="playBox" style="float: left;margin: 5% 0 0 5%">
          <div id="bigPlayBox" class="imgList">
            <img src="images/showProduct/2.png" alt="" class="current">
            <img src="images/showProduct/1.png" alt="">
            <img src="images/showProduct/3.png" alt="">
            <img src="images/showProduct/4.png" alt="">
            <img src="images/showProduct/5.png" alt="">
            <img src="images/showProduct/6.png" alt="">
            <img src="images/showProduct/7.png" alt="">
            <img src="images/showProduct/8.png" alt="">
            <img src="images/showProduct/9.png" alt="">
            <img src="images/showProduct/10.png" alt="">
            <img src="images/showProduct/11.png" alt="">
            <img src="images/showProduct/12.png" alt="">
          </div>
          <div id="bigLiList" class="liList">
            <ul>
              <li class="current"></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="leftBtn"></div>
          <div class="rightBtn"></div>
        </div>
        <div class="gradientColor" style="float: left;margin: 2% 0 0 5%;"></div>
        <div class="number">
          <span>0</span>
          <span>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
          <span>6</span>
          <span>7</span>
          <span>8</span>
          <span>9</span>
          <span>10</span>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="rightTop" style="position: relative">
      <div class="title">实&nbsp验&nbsp运&nbsp行&nbsp状&nbsp态</div>
      <div id="rtClick" class="contentButton" style="position: absolute;right: 0;top: -9px;z-index: 999">
        >>展开详情
      </div>
      <div class="status" style="position: relative;">
<!--        <div id="time" class="time"></div>-->
<!--        添加一个div使得站名能够滚动-->
        <div style="height: 380px;overflow: scroll;width: 100%">
        <table>
          <tr style="height: 70px;">
            <th style="width: 10%;">站名</th>
            <th style="width: 20%;">天气</th>
            <th style="width: 10%;"></th>
            <th style="width: 10%;">状态</th>
            <th style="width: 50%;">故障率</th>
          </tr>
          <tr>
            <td>长春</td>
            <td>
              <div>
                <div id="weather_cc"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_cc"></div>
            </td>
            <td>正常</td>
            <td>
              <div id="faultRate_cc"></div>
            </td>
          </tr>
          <tr>
            <td>大连</td>
            <td>
              <div>
                <div id="weather_dl"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_dl"></div>
            </td>
            <td>正常</td>
            <td>
              <div id="faultRate_dl"></div>
            </td>
          </tr>
          <tr>
            <td>石家庄</td>
            <td>
              <div>
                <div id="weather_sjz"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_sjz"></div>
            </td>
            <td>正常</td>
            <td>
              <div id="faultRate_sjz"></div>
            </td>
          </tr>
          <tr>
            <td>包头</td>
            <td>
              <div>
                <div id="weather_bt"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_bt"></div>
            </td>
            <td>正常</td>
            <td>
              <div id="faultRate_bt"></div>
            </td>
          </tr>
          <tr>
            <td>青海湖</td>
            <td>
              <div>
                <div id="weather_qhh"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_qhh"></div>
            </td>
            <td>维修</td>
            <td>
              <div id="faultRate_qhh"></div>
            </td>
          </tr>
          <tr>
            <td>南通</td>
            <td>
              <div>
                <div id="weather_nt"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_nt"></div>
            </td>
            <td>正常</td>
            <td>
              <div id="faultRate_nt"></div>
            </td>
          </tr>
          <tr>
            <td>广州</td>
            <td>
              <div>
                <div id="weather_gz"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_gz"></div>
            </td>
            <td>正常</td>
            <td>
              <div id="faultRate_gz"></div>
            </td>
          </tr>
          <tr>
            <td>南宁</td>
            <td>
              <div>
                <div id="weather_nn"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_nn"></div>
            </td>
            <td>正常</td>
            <td>
              <div id="faultRate_nn"></div>
            </td>
          </tr>
          <tr>
            <td>呼伦贝尔</td>
            <td>
              <div>
                <div id="weather_hlbe"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_hlbe"></div>
            </td>
            <td>维修</td>
            <td>
              <div id="faultRate_hlbe"></div>
            </td>
          </tr>
          <tr>
            <td>敦煌</td>
            <td>
              <div>
                <div id="weather_dh"></div>
                <div></div>
              </div>
            </td>
            <td>
              <div id="pic_dh"></div>
            </td>
            <td>故障</td>
            <td>
              <div id="faultRate_dh"></div>
            </td>
          </tr>
        </table>
        </div>
      </div>
    </div>
    <div class="rightBottom">
      <div class="title">产&nbsp品&nbsp展&nbsp示</div>
      <div id="rbClick" class="contentButton">
        >>展开详情
      </div>
      <div class="playBox">
        <div id="smallPlayBox" class="imgList">
          <img src="images/showProduct/2.png" alt="" class="current">
          <img src="images/showProduct/1.png" alt="">
          <img src="images/showProduct/3.png" alt="">
          <img src="images/showProduct/4.png" alt="">
          <img src="images/showProduct/5.png" alt="">
          <img src="images/showProduct/6.png" alt="">
          <img src="images/showProduct/7.png" alt="">
          <img src="images/showProduct/8.png" alt="">
          <img src="images/showProduct/9.png" alt="">
          <img src="images/showProduct/10.png" alt="">
          <img src="images/showProduct/11.png" alt="">
          <img src="images/showProduct/12.png" alt="">
        </div>
        <div id="smallLiList" class="liList" style="left: 30%">
          <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="leftBtn"></div>
        <div class="rightBtn"></div>
      </div>
      <div class="gradientColor"></div>
      <div class="number">
        <span>0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>10</span>
      </div>
    </div>
  </section>
</main>
<iframe id="control" src="newControl/siteControl.html"></iframe>
<iframe id="analysis" src="newControl/dataAnalysis.html"></iframe>

<script src="lib/custom/js/tool.js"></script>
<script src="lib/Cesium/Cesium.js"></script>
<script src="js/satellite.js"></script>
<script src="lib/jquery/jquery-3.4.1.js"></script>
<script src="lib/echarts/echarts.js"></script>
<script src="js/faultRateBar.js"></script>
<script src="js/home.js"></script>
<script>
  $('#navL1').on('click', function () {
    $(this).css('background', 'url(./images/home/菜单按钮_左侧_p.png) no-repeat');
    $('#navL2').css('background', 'url(./images/home/菜单按钮_左侧_n.png) no-repeat');
    $('#navR1').css('background', 'url(./images/home/菜单按钮_右侧_n.png) no-repeat');
    $('#navR2').css('background', 'url(./images/home/菜单按钮_右侧_n.png) no-repeat');
    $(this).css('background-size', '100% 100%');
    $('#office').show();
    $('#control').hide();
    $('#analysis').hide();
  })

  setTimeout(function () {
    $('#navL1').click();
  }, 5000)

</script>
</body>
</html>